import React, { memo, useEffect, useState } from "react";
import { connect } from "react-redux";
import { ShopcarStyle } from "./Shopcar.style";
import Scroll from '@/baseUI/scroll';
import { useNavigate } from "react-router-dom"
import * as Action from "../../../pages/home/store/actionCreators"

const Shopcar = (props) => {
    const [inputNumber, setInputNumber] = useState(1);
    const navigate = useNavigate();

    // 传入接受的状态
    const { shopcar, totalprice, checkall } = props;
    console.log(checkall);
    // console.log(props);
    // console.log(props);
    // 传入接受的方法
    const { decreasenum, incrementnum, changeCheck, changeAll, countAll } = props
    // console.log(decreasenum, incrementnum);
    const gohome = () => {
        navigate(-1);
    }

    const checkinput = (e) => {

        if (e.target.value.length > 1) {
            let regex = /^0*/g;
            var value = e.target.value.replace(regex, '');
            if (value > 20) {
                value = 20;
            }
            if (value < 0) {
                value = 0;
            }
            setInputNumber(value);
        }
        else {
            setInputNumber(e.target.value);
        }

    }



    useEffect(() => {
        countAll(shopcar);
    }, [shopcar])
    return (
        <ShopcarStyle >
            <div className="navbar">
                <div className="navbar_left" onClick={gohome}><svg t="1642057754552" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1378" width="200" height="200"><path d="M727.28171457 968.45419457l78.06065778-69.77561284a1.16508445 1.16508445 0 0 0 0-1.68289976L375.94402765 513.4239921a1.16508445 1.16508445 0 0 1 0-1.68289975l429.3983447-383.70114371a1.16508445 1.16508445 0 0 0 0-1.68289975l-78.06065778-69.77561284a1.16508445 1.16508445 0 0 0-1.55344593 0L214.90346667 510.05819259a1.16508445 1.16508445 0 0 0 0 1.68289976 1.16508445 1.16508445 0 0 1 0 1.68289975 1.16508445 1.16508445 0 0 0 0 1.68289975l510.82480197 453.34730272a1.16508445 1.16508445 0 0 0 1.55344593 0z" fill="#888888" p-id="1379"></path></svg></div>
                <div className="navbar_mid">我的购物车</div>
                <div className="navbar_right"><svg t="1642058749735" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8303" width="200" height="200"><path d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z" p-id="8304"></path><path d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z" p-id="8305"></path><path d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z" p-id="8306"></path><path d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z" p-id="8307"></path></svg></div>
            </div>
            <div className="container">
                <div className="shopcar_head">
                    <div className="shopcar">购物车</div>
                    <div className="manage">管理</div>
                </div>
                <Scroll
                    direction={'vertical'}
                    refresh={false}
                >
                    <div className="inner-container">
                        <div className="body_container">
                            <div className="min_height">
                                {
                                    shopcar.map((item) => {
                                        return (
                                            <div className="itemcard" key={item.id}>
                                                <input type="checkbox" checked={item.check} onClick={() => changeCheck(item.id)} onChange={() => { }} />
                                                <img src={item.picUrl} alt="" />
                                                <div className="cardInfo">
                                                    <div className="infoHead">{item.desc}</div>
                                                    <div className="infoBody">{item.size}</div>
                                                    <div className="infoBottom">
                                                        <div className="price">￥{item.prc}</div>
                                                        <div className="changenumber">
                                                            <div className="decrement" onClick={() => decreasenum(item.id)}> <svg t="1642149716755" className="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2747" width="200" height="200"><path d="M863.74455 544.00086 163.424056 544.00086c-17.664722 0-32.00086-14.336138-32.00086-32.00086s14.336138-32.00086 32.00086-32.00086l700.320495 0c17.695686 0 31.99914 14.336138 31.99914 32.00086S881.440237 544.00086 863.74455 544.00086z" p-id="2748"></path></svg></div>
                                                            <input type="number" placeholder="1" value={item.num} onChange={checkinput} />
                                                            <div className="increment" onClick={() => incrementnum(item.id)}><svg t="1642149640332" className="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1884" width="200" height="200"><path d="M863.328262 481.340895l-317.344013 0.099772L545.984249 162.816826c0-17.664722-14.336138-32.00086-32.00086-32.00086s-31.99914 14.336138-31.99914 32.00086l0 318.400215-322.368714-0.17718c-0.032684 0-0.063647 0-0.096331 0-17.632039 0-31.935493 14.239806-32.00086 31.904529-0.096331 17.664722 14.208843 32.031824 31.871845 32.095471l322.59234 0.17718 0 319.167424c0 17.695686 14.336138 32.00086 31.99914 32.00086s32.00086-14.303454 32.00086-32.00086L545.982529 545.440667l317.087703-0.099772c0.063647 0 0.096331 0 0.127295 0 17.632039 0 31.935493-14.239806 32.00086-31.904529S880.960301 481.404542 863.328262 481.340895z" p-id="1885"></path></svg></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </Scroll>
                <div className="shopcar_footer">
                    <div className="checkall"><input type="checkbox" checked={checkall} onClick={() => changeAll(shopcar)} onChange={() => { }} />全选</div>
                    <div className="buy">
                        <div className="showprice">
                            <div className="price">
                                <div className="price_left">待支付</div>
                                <div className="price_right">已免邮费</div>
                            </div>
                            <div className="pricetotal">￥{totalprice}</div>
                        </div>
                        <div className="buynow">
                            <div className="title">立即购买 </div>
                        </div>
                    </div>
                </div>
            </div>
        </ShopcarStyle>
    )
}


const StateToPorps = (state) => {
    return {
        shopcar: state.home.shopcar,
        totalprice: state.home.totalprice,
        checkall: state.home.checkall
    }
}
const DispatchToProps = (dispatch) => {
    return {
        decreasenum(id) {//进行减操作
            dispatch(Action.DecrementShopcarNum(id));
        },
        incrementnum(id) {//进行加操作
            dispatch(Action.IncrementShopcarNum(id));
        },
        changeCheck(id) {//进行勾选操作
            dispatch(Action.changeCheck(id));
        },
        changeAll(shopcar) {//全选操作
            dispatch(Action.changeAll(shopcar));
        },
        countAll(shopcar) { // 计算全部勾选价格
            dispatch(Action.countAll(shopcar));
        }
    }
}

export default connect(StateToPorps, DispatchToProps)(memo(Shopcar))